<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link rel="shortcut icon" type="image/ico" href="/site_media/image/logo.ico" />
    <link rel="stylesheet" type="text/css" href="/site_media/css/style.css" />
    <link rel="stylesheet" type="text/css" href="/site_media/css/imgareaselect-default.css" />
    <script src="/site_media/js/jquery-1.6.1.js" type="text/javascript"></script>
	<script src="/site_media/js/jquery.imgareaselect.pack.js" type="text/javascript"></script>
    <script src="/site_media/js/init.js" type="text/javascript"></script>
    <script src="/site_media/js/game.js" type="text/javascript"></script>
    <title>ESP Game</title>
</head>
<body>
    <div class="top">
        <span class="top-info">
            {% if user.is_authenticated %}{{ user.username }} | Help | <a href="/logout/">Sign Out</a>{% else %}Help | <a href="/login/">Sign In</a>{% endif %}
        </span>
        <img class="top-logo" src="/site_media/image/logo.png" alt="" />
        <div class="top-title">ESP Game</div>
    </div>
    <div class="main">
    	<div class="game-left">
            <div class="game-left-title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;time left&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div id="game_time" class="game-left-content"></div>
            <div class="game-left-title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;score&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div id="game_score" class="game-left-content">0</div>
            <div class="game-left-title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;passes&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div id="game_pass_num" class="game-left-content">0</div>
        </div>
        <div class="game-middle">
        	<div class="game-middle-top">
                <input id="game_input" class="game-middle-input" type="text" size="50" maxlength="20" />
                <input id="game_label" type="submit" value="label" />
                <input id="game_pass" type="submit" value="pass" />
                <div id="game_info" class="game-middle-partner-info">Your partner hasn't suggested any labels yet.</div>
            </div>
            <div class="game-middle-content">
                <div class="game-middle-image-container">
                    <img id="game_middle_image" class="game-middle-image" style="{% if width != 0 and width <= 300 %}width:{{ width }};{% else %}width:300px;{% endif %}{% if height != 0 and height <= 300 %}height:{{ height }};{% else %}height:300px;{% endif %}" src="{{ url }}" alt="" />
                </div>
            </div>
        </div>
        <div class="game-right">
            <div class="game-right-title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;off-limits&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div class="game-right-content">
                <div id="limit1"></div>
                <div id="limit2"></div>
                <div id="limit3"></div>
                <div id="limit4"></div>
                <div id="limit5"></div>
                <div id="limit6"></div>
            </div>
            <div class="game-right-title">&nbsp;&nbsp;&nbsp;my labels&nbsp;&nbsp;&nbsp;</div>
            <div class="game-right-content">
                <div id="label1"></div>
                <div id="label2"></div>
                <div id="label3"></div>
                <div id="label4"></div>
                <div id="label5"></div>
                <div id="label6"></div>
            </div>
        </div>
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div class="clear"></div>
    <div class="footer">
        ©2011 ESP Game All Rights Reserved
    </div>
</body>
</html>